<template>
  <tn-navbar :bottom-shadow="false" fixed>
    <text class="title">消息中心</text>
  </tn-navbar>
  <view class="container">
    <view class="message-list">
      <view v-if="messages.length === 0" class="empty-notice">
        <image src="/static/images/empty-message.png" mode="aspectFit" class="empty-image"></image>
        <text class="empty-text">暂无消息</text>
      </view>
      
      <view 
        v-for="(message, index) in messages" 
        :key="message.id" 
        class="message-item"
        :class="{ 'message-unread': !message.isRead }"
        @tap="navigateTo(`/pages/message/detail?id=${message.id}`)"
      >
        <!-- 状态标识 -->
        <view class="status-indicator" :class="'status-' + message.status"></view>
        
        <view class="message-content">
          <view class="message-header">
            <text class="message-title">{{ message.title }}</text>
            <view class="urgency-tag" :class="'urgency-' + message.urgencyStatus">
              {{ message.urgencyText }}
            </view>
          </view>
          <text class="message-desc">{{ message.content }}</text>
          <view class="message-footer">
            <text class="message-time">{{ message.time }}</text>
            <view class="status-tag" :class="'status-tag-' + message.status">
              {{ getStatusText(message.status) }}
            </view>
          </view>
        </view>
      </view>
      
      <!-- 加载更多 -->
      <view v-if="messages.length > 0" class="load-more">
        <text v-if="loading" class="loading-text">加载中...</text>
        <text v-else-if="hasMore" class="more-text" @tap="loadMore">点击加载更多</text>
        <text v-else class="no-more-text">没有更多消息了</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { onShow } from '@dcloudio/uni-app';

// 消息列表
const messages = ref([]);
// 分页参数
const pagination = ref({
  current: 1,
  size: 10,
  total: 0
});
// 加载状态
const loading = ref(false);
// 是否还有更多数据
const hasMore = ref(true);

// 添加模拟数据
const mockMessageData = {
  code: 200,
  msg: "success",
  data: {
    records: [
      {
        id: 97,
        user_id: 14,
        qrcode_id: 10,
        qrcode_user_id: 12,
        urgency_status: 0,
        notes: "挡住出口，影响通行，其他原因",
        status: 3,
        update_time: "2025-03-21 20:04:03",
        instime: 1742558603,
        itime: "2025-03-21 20:03:23",
        urgency_status_text: "普通:不急，希望车主看到后尽快处理",
        human_time: "3天前"
      },
      {
        id: 96,
        user_id: 14,
        qrcode_id: 10,
        qrcode_user_id: 12,
        urgency_status: 0,
        notes: "需要外出",
        status: 3,
        update_time: "2025-03-21 14:15:20",
        instime: 1742536184,
        itime: "2025-03-21 13:49:44",
        urgency_status_text: "普通:不急，希望车主看到后尽快处理",
        human_time: "3天前"
      },
      {
        id: 94,
        user_id: 14,
        qrcode_id: 10,
        qrcode_user_id: 12,
        urgency_status: 0,
        notes: "影响通行，挡住出口，维修需要",
        status: 0,
        update_time: "2025-03-21 13:48:20",
        instime: 1742368661,
        itime: "2025-03-19 15:17:41",
        urgency_status_text: "普通:不急，希望车主看到后尽快处理",
        human_time: "5天前"
      },
      {
        id: 93,
        user_id: 14,
        qrcode_id: 10,
        qrcode_user_id: 12,
        urgency_status: 0,
        notes: "影响通行，挡住出口，维修需要",
        status: 0,
        update_time: "2025-03-21 13:48:20",
        instime: 1742364143,
        itime: "2025-03-19 14:02:23",
        urgency_status_text: "普通:不急，希望车主看到后尽快处理",
        human_time: "5天前"
      },
      {
        id: 92,
        user_id: 14,
        qrcode_id: 10,
        qrcode_user_id: 12,
        urgency_status: 0,
        notes: "影响通行，挡住出口，维修需要",
        status: 0,
        update_time: "2025-03-21 13:48:20",
        instime: 1742188332,
        itime: "2025-03-17 13:12:12",
        urgency_status_text: "普通:不急，希望车主看到后尽快处理",
        human_time: "2025-03-17 13:12"
      },
      {
        id: 90,
        user_id: 14,
        qrcode_id: 10,
        qrcode_user_id: 12,
        urgency_status: 0,
        notes: "影响通行，挡住出口，维修需要",
        status: 0,
        update_time: "2025-03-21 13:48:20",
        instime: 1742141328,
        itime: "2025-03-17 00:08:48",
        urgency_status_text: "普通:不急，希望车主看到后尽快处理",
        human_time: "2025-03-17 00:08"
      }
    ],
    total: 6
  },
  timestamp: 1742878459
};

// 页面显示时获取数据
onShow(() => {
  // 重置数据并获取第一页
  resetAndFetchMessages();
});

// 重置数据并获取第一页
const resetAndFetchMessages = () => {
  messages.value = [];
  pagination.value.current = 1;
  hasMore.value = true;
  getMessages();
};

// 获取消息列表
const getMessages = async () => {
  if (loading.value || !hasMore.value) return;
  
  loading.value = true;
  try {
    // 使用模拟数据替代API调用
    setTimeout(() => {
      const data = mockMessageData.data;
      if (pagination.value.current === 1) {
        messages.value = data.records.map(item => ({
          id: item.id.toString(),
          title: '挪车请求',
          content: item.notes || '您的车辆被要求挪车，请尽快处理',
          time: item.human_time,
          isRead: item.status === 2, // 假设status为2表示已读
          vehicleLicense: '', // API中没有提供车牌号，如果有需要可以添加
          urgencyStatus: item.urgency_status,
          urgencyText: item.urgency_status_text,
          status: item.status
        }));
      } else {
        messages.value = [...messages.value, ...data.records.map(item => ({
          id: item.id.toString(),
          title: '挪车请求',
          content: item.notes || '您的车辆被要求挪车，请尽快处理',
          time: item.human_time,
          isRead: item.status === 2, // 假设status为2表示已读
          vehicleLicense: '', // API中没有提供车牌号，如果有需要可以添加
          urgencyStatus: item.urgency_status,
          urgencyText: item.urgency_status_text,
          status: item.status
        }))];
      }
      
      // 更新分页信息
      pagination.value.total = data.total;
      pagination.value.current++;
      
      // 判断是否还有更多数据
      hasMore.value = messages.value.length < data.total;
    }, 300);
  } catch (error) {
    console.error('获取消息列表失败:', error);
    uni.showToast({
      title: '获取消息失败，请稍后重试',
      icon: 'none'
    });
  } finally {
    loading.value = false;
  }
};

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    0: '处理中',
    1: '通知已发送',
    2: '已回复',
    3: '已完成',
    4: '通知失败'
  };
  return statusMap[status] || '未知状态';
};

// 加载更多消息
const loadMore = () => {
  if (hasMore.value && !loading.value) {
    getMessages();
  }
};

// 页面导航
const navigateTo = (url) => {
  uni.navigateTo({ url });
};
</script>

<style>
.container {
  padding: 20rpx;
  background-color: #f8f8f8;
  min-height: 100vh;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  margin-bottom: 30rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.empty-notice {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
}

.empty-image {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 30rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}

.message-item {
  position: relative;
  background-color: #ffffff;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  padding: 30rpx;
  margin-bottom: 20rpx;
  display: flex;
  overflow: hidden;
}


/* 状态指示器 */
.status-indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: 8rpx;
  height: 100%;
}

.status-0 {
  background-color: #1890ff;
}

.status-1 {
  background-color: #faad14;
}

.status-2 {
  background-color: #52c41a;
}

.status-3 {
  background-color: #13c2c2;
}

.status-4 {
  background-color: #ff4d4f;
}

.message-content {
  flex: 1;
  padding-left: 20rpx;
}

.message-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.message-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

/* 紧急程度标签 */
.urgency-tag {
  padding: 4rpx 16rpx;
  border-radius: 100rpx;
  font-size: 22rpx;
  font-weight: bold;
  max-width: 200rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.urgency-0 {
  background-color: #e8f5e9;
  color: #1aad19;
}

.urgency-1 {
  background-color: #fff7e6;
  color: #fa8c16;
}

.urgency-2 {
  background-color: #fff1f0;
  color: #ff4d4f;
}

.message-desc {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 20rpx;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.message-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.message-time {
  font-size: 24rpx;
  color: #999;
}

/* 状态标签 */
.status-tag {
  padding: 4rpx 16rpx;
  border-radius: 4rpx;
  font-size: 22rpx;
}

.status-tag-0 {
  background-color: #e6f7ff;
  color: #1890ff;
}

.status-tag-1 {
  background-color: #fff7e6;
  color: #faad14;
}

.status-tag-2 {
  background-color: #f6ffed;
  color: #52c41a;
}

.status-tag-3 {
  background-color: #e6fffb;
  color: #13c2c2;
}

.status-tag-4 {
  background-color: #fff1f0;
  color: #ff4d4f;
}

.message-vehicle {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
}

.vehicle-label {
  margin-right: 10rpx;
}

.vehicle-license {
  background-color: #f8f8f8;
  border: 1rpx solid #ddd;
  border-radius: 4rpx;
  padding: 2rpx 10rpx;
  color: #666;
}

/* 加载更多样式 */
.load-more {
  text-align: center;
  padding: 30rpx 0;
}

.loading-text, .more-text, .no-more-text {
  font-size: 28rpx;
  color: #999;
}

.more-text {
  color: #1aad19;
}

/* 加载动画 */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style> 